<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<view class="banner_div">
				<uni-swiper-dot class="uni-swiper-dot-box" :info="banner" mode="round" :current="current"
					:dots-styles="swiperData">
					<swiper class="swiper-box" :current="swiperDotIndex" @change="change" autoplay="auto">
						<swiper-item v-for="(item, index) in banner" :key="index" @click="item.url ? $public.navto(item.url) : ''">
							<image mode="scaleToFill" class="swiperimage" :src="$public.imgageUrl(item.images)"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="juan-div wrap">
				<view class="list" :class="item.overNum>=item.number?'no':''" v-for="(item,index) in juanData" :key="index">
					<view class="left">
						<text v-if="item.typeId==1">{{item.money}}<text class="small">折</text> </text>
						<text v-else><text class="small">￥</text>{{item.money}}</text>
					</view>
					<view class="xian">
						<view class="shang">

						</view>
						<view class="zhong">
							<view class="zhongxian">

							</view>
						</view>
						<view class="xia">

						</view>
					</view>
					<view class="right">
						<view class="title">
							{{item.bak1}}
						</view>
						<view class="time">
							{{item.useStartTime.split(' ')[0]}}—{{item.useEndTime.split(' ')[0]}}生效
						</view>
						<view class="btn">
							<view class="btncss no" v-if="item.over==1">
								已领取
							</view>
							<view class="btncss" v-else @click="lingqu(item)">
								领取
							</view>
						</view>
					</view>
					<view class="qiangguang" v-if="item.overNum>=item.number">
						<image src="../../static/sj_dp_qg.png" mode="scaleToFill" class="image"></image>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				swiperData: {
					selectedBackgroundColor: "#1ca7ec",
					selectedBorder: "#1ca7ec",
					backgroundColor: "#d3d3d3",
					border: "#d3d3d3",
				},
				swiperDotIndex: 0,
				current: 0,
				juanData: []
			};
		},
		onLoad() {
			this.getBanner();
			this.getCouponLine()
		},
		onShow() {
			if (!this.$public.isLoginUrl())
				return false;
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			getCouponLine() {
				let that = this
				this.$public.htmlPost("/api/getCouponLine").then((res) => {
					console.log("getCouponLine res", res)
					let data = res.data;
					if (data.code == 0) {
						that.juanData = data.data
					}
					uni.hideLoading();
				})
			},
			getBanner() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 29,
					tj: ""
				}).then((res) => {
					console.log("getBanner res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							item.showVideo = false
						})
						that.banner = data.data
					}
				})
			},
			lingqu(item) {
				if (item.overNum >= item.number || item.over == 1) return false;
				this.addCoupon(item)
			},
			addCoupon(item) {
				this.$public.htmlPost("/api/addCoupon", {
					lineId: item.lineId
				}).then((res) => {
					console.log("addCoupon res", res)
					let data = res.data;
					if (data.code == 0) {
						uni.showModal({
							title: "温馨提示",
							content: "抢劵成功",
							showCancel: false
						})
						item.over = true
					} else {
						uni.showModal({
							title: "温馨提示",
							content: data.msg,
							showCancel: false
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: $uni-wrap-padding;
	}

	.banner_div {
		// margin: 30rpx 0;

		.swiper-box {
			height: 424rpx;
		}

		.swiperimage {
			width: 100%;
			height: 100%;
		}
	}

	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		margin-top: 30rpx;
		border-radius: 20rpx;
		position: relative;

		.left {
			width: 176rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 70rpx;
			// font-weight: bold;
			color: #DF686A;

			.small {
				font-size: 36rpx;
			}
		}

		.xian {
			width: 40rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 270rpx;

			.shang {
				background: #f5f5f5;
				width: 40rpx;
				height: 8%;
				border-radius: 0 0 50% 50%;
			}

			.zhong {
				height: 84%;
				display: flex;
				align-items: center;

				.zhongxian {
					border-left: 1rpx dashed #CCCCCC;
					height: 80%;
				}
			}

			.xia {
				background: #f5f5f5;
				width: 40rpx;
				height: 8%;
				border-radius: 50% 50% 0 0;
			}
		}

		.right {
			padding: 40rpx 0;
			width: 510rpx;

			.title {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				text-align: center;
			}

			.time {

				font-size: 26rpx;
				color: #666666;
				padding: 16rpx 0 30rpx;
				text-align: center;
			}

			.btn {
				.btncss {
					background: #DF686A;
					width: 200rpx;
					height: 64rpx;
					margin: 0 auto;
					font-weight: normal;
					font-size: 28rpx;

					&.no {
						background: #CCCCCC;
					}
				}
			}
		}

		.qiangguang {
			position: absolute;
			right: 0;
			top: 0;

			.image {
				width: 122rpx;
				height: 122rpx;
			}
		}

		&.no {
			.left {
				color: #CCCCCC;
			}

			.right {
				.btn {
					.btncss {
						background: #CCCCCC;
					}
				}
			}
		}
	}
</style>